<template>
  <div class="group-container">
    <div class="group-header">
      <h2>小组管理</h2>
      <el-button type="primary" @click="openCreateGroupDialog" :loading="checkingLeader">
        创建小组
      </el-button>
    </div>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    
    <div v-else-if="userGroups.length === 0" class="empty-content">
      <el-empty description="您暂未加入任何小组" />
    </div>
    
    <div v-else class="groups-list">
      <el-card v-for="group in userGroups" :key="group.groupId" class="group-card">
        <template #header>
          <div class="card-header">
            <span class="group-title">小组 #{{ group.groupId }}</span>
            <div>
              <el-tag v-if="group.leader === currentUsername" type="success">组长</el-tag>
              <el-tag v-else type="info">成员</el-tag>
              <el-button 
                v-if="group.leader === currentUsername" 
                type="primary" 
                size="small" 
                @click="openMemberDialog(group)" 
                class="edit-button"
              >
                编辑成员
              </el-button>
              <el-button 
                v-if="group.leader === currentUsername" 
                type="danger" 
                size="small" 
                @click="confirmDeleteGroup(group)" 
                class="delete-button"
              >
                删除
              </el-button>
            </div>
          </div>
        </template>
        <div class="group-info">
          <div class="info-item">
            <span class="label">组长：</span>
            <span class="value">{{ group.leader }}</span>
          </div>
          <div class="info-item">
            <span class="label">成员：</span>
            <div class="members-list">
              <el-tag 
                v-for="member in getGroupMembers(group.members)" 
                :key="member"
                class="member-tag"
                :type="member === currentUsername ? 'primary' : ''"
              >
                {{ member }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 创建小组对话框 -->
    <el-dialog
      v-model="createGroupDialogVisible"
      title="创建新小组"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="isLeaderAlready" class="warning-message">
        <el-alert
          title="您已经是其他小组的组长"
          type="error"
          description="每个用户只能成为一个小组的组长，您无法创建新的小组。"
          :closable="false"
          show-icon
        />
      </div>
      
      <div class="dialog-section">
        <h4>当前组长</h4>
        <div class="current-leader">
          <el-tag type="success">{{ currentUsername }}</el-tag>
        </div>
      </div>
      
      <div class="dialog-section">
        <h4>小组成员</h4>
        <div class="members-container">
          <div v-if="newGroupMembers.length > 0" class="current-members">
            <el-tag
              v-for="member in newGroupMembers"
              :key="member"
              closable
              @close="removeNewGroupMember(member)"
              class="member-tag"
            >
              {{ member }}
            </el-tag>
          </div>
          <div v-else class="empty-members">
            <el-empty description="暂无其他成员" :image-size="60" />
          </div>
        </div>
      </div>
      
      <div class="dialog-section">
        <h4>添加新成员</h4>
        <div class="add-member-form">
          <el-input
            v-model="newGroupMember"
            placeholder="输入用户名搜索"
            @input="searchNewGroupUsers"
            @keyup.enter="addNewGroupMember"
          />
          <el-button type="primary" @click="addNewGroupMember">添加</el-button>
          
          <div v-if="newGroupSearchResults.length > 0" class="search-results">
            <div
              v-for="user in newGroupSearchResults"
              :key="user.username"
              class="search-result-item"
              @click="selectNewGroupUser(user.username)"
            >
              <span>{{ user.username }}</span>
              <span v-if="user.nickname" class="nickname">({{ user.nickname }})</span>
            </div>
          </div>
          <div v-else-if="newGroupSearchPerformed && newGroupMember.trim()" class="no-results">
            未找到匹配的用户
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createGroupDialogVisible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="createGroup" 
            :loading="creatingGroup"
            :disabled="isLeaderAlready"
          >
            创建
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 成员管理对话框 -->
    <el-dialog
      v-model="memberDialogVisible"
      title="管理小组成员"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="currentGroup">
        <div class="dialog-section">
          <h4>当前成员</h4>
          <div class="member-note">
            <el-alert
              type="info"
              :closable="false"
              show-icon
            >
              <template #title>
                组长必须是小组成员且不能被删除
              </template>
            </el-alert>
          </div>
          <div class="current-members">
            <el-tag
              v-for="member in currentMembers"
              :key="member"
              :closable="member !== currentGroup.leader"
              @close="removeMember(member)"
              class="member-tag"
              :type="member === currentGroup.leader ? 'success' : ''"
              :disable-transitions="false"
            >
              {{ member }}
              <span v-if="member === currentGroup.leader" class="leader-badge">(组长)</span>
            </el-tag>
          </div>
        </div>
        
        <div class="dialog-section">
          <h4>添加新成员</h4>
          <div class="add-member-form">
            <el-input
              v-model="newMember"
              placeholder="输入用户名搜索"
              class="member-input"
              @input="searchUsers"
              clearable
            />
            <el-button type="primary" @click="addMember" :disabled="!newMember.trim()">
              添加
            </el-button>
          </div>
          
          <!-- 搜索结果列表 -->
          <div v-if="searchResults.length > 0" class="search-results">
            <div 
              v-for="user in searchResults" 
              :key="user.username"
              class="search-result-item"
              @click="selectUser(user.username)"
            >
              <span>{{ user.username }}</span>
              <span class="user-phone">{{ user.phone }}</span>
            </div>
          </div>
          <div v-else-if="newMember.trim() && searchPerformed" class="no-results">
            未找到匹配的用户
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="memberDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveMembers" :loading="saving">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 创建小组对话框已移至上方 -->
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'

// 数据定义
const loading = ref(true)
const saving = ref(false)
const groups = ref([])
const currentUsername = ref('')

// 成员管理对话框相关变量
const memberDialogVisible = ref(false)
const currentGroup = ref(null)
const currentMembers = ref([])
const newMember = ref('')
const searchResults = ref([])
const searchPerformed = ref(false)
const searchTimeout = ref(null)

// 创建小组相关
const createGroupDialogVisible = ref(false)
const isLeaderAlready = ref(false)
const checkingLeader = ref(false)
const creatingGroup = ref(false)
const newGroupMembers = ref([])
const newGroupMember = ref('')
const newGroupSearchResults = ref([])
const newGroupSearchPerformed = ref(false)
const newGroupSearchTimeout = ref(null)

// 计算属性：获取用户所在的小组
const userGroups = computed(() => {
  return groups.value.filter(group => {
    // 检查用户是否是组长
    if (group.leader === currentUsername.value) return true
    
    // 检查用户是否在成员列表中
    const members = getGroupMembers(group.members)
    return members.includes(currentUsername.value)
  })
})

// 获取当前登录用户信息
const getCurrentUser = () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('system-user') || '{}')
    return userInfo?.username || userInfo?.name || ''
  } catch (error) {
    console.error('获取用户信息失败:', error)
    return ''
  }
}

// 将逗号分隔的成员字符串转换为数组
const getGroupMembers = (membersStr) => {
  if (!membersStr) return []
  return membersStr.split(',').map(name => name.trim()).filter(name => name)
}

// 确认删除小组
const confirmDeleteGroup = (group) => {
  ElMessageBox.confirm(
    `确定要删除小组 #${group.groupId} 吗？此操作不可恢复。`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteGroup(group.groupId)
    })
    .catch(() => {
      // 用户取消删除操作
    })
}

// 删除小组
const deleteGroup = async (groupId) => {
  try {
    const response = await request.delete(`/api/groups/${groupId}`, {
      params: {
        username: currentUsername.value
      }
    })
    
    if (response.code === '200') {
      ElMessage.success('删除小组成功')
      // 重新获取小组列表
      fetchGroups()
    } else {
      ElMessage.error(response.msg || '删除小组失败')
    }
  } catch (error) {
    console.error('删除小组出错:', error)
    ElMessage.error('删除小组失败，请稍后重试')
  }
}

// 获取所有小组数据
const fetchGroups = async () => {
  try {
    loading.value = true
    const response = await request.get('/api/groups')
    
    if (response.code === '200') {
      groups.value = response.data || []
      console.log('获取到的小组数据:', groups.value)
    } else {
      ElMessage.error(response.msg || '获取小组数据失败')
      groups.value = []
    }
  } catch (error) {
    console.error('获取小组数据失败:', error)
    ElMessage.error('获取小组数据失败: ' + (error.message || '未知错误'))
    groups.value = []
  } finally {
    loading.value = false
  }
}

// 打开成员管理对话框
const openMemberDialog = (group) => {
  console.log('打开成员管理对话框，小组信息:', group)
  // 只有组长才能编辑成员
  if (group.leader !== currentUsername.value) {
    ElMessage.warning('只有小组组长才能编辑成员')
    return
  }
  
  currentGroup.value = { ...group }
  // 初始化当前成员列表
  currentMembers.value = getGroupMembers(group.members)
  console.log('初始化当前成员列表:', currentMembers.value)
  
  // 确保组长在成员列表中
  if (!currentMembers.value.includes(group.leader)) {
    currentMembers.value.push(group.leader)
    console.log('已自动将组长添加到成员列表:', group.leader)
  }
  
  memberDialogVisible.value = true
  // 清空搜索相关状态
  newMember.value = ''
  searchResults.value = []
  searchPerformed.value = false
}

// 添加新成员
const addMember = async () => {
  const memberName = newMember.value.trim()
  if (!memberName) return
  
  console.log('尝试添加成员:', memberName)
  console.log('当前成员列表:', currentMembers.value)
  console.log('当前小组信息:', currentGroup.value)
  
  // 检查是否已存在
  if (currentMembers.value.includes(memberName)) {
    ElMessage.warning('该成员已在小组中')
    return
  }
  
  // 检查是否是组长
  if (memberName === currentGroup.value?.leader) {
    ElMessage.warning('组长已默认在小组中')
    return
  }
  
  // 验证用户是否存在
  try {
    console.log('验证用户是否存在:', memberName)
    const response = await request.get('/api/users/search', {
      params: { username: memberName }
    })
    
    console.log('验证用户响应:', response)
    
    // 检查是否找到精确匹配的用户名
    const exactMatch = response.code === '200' && response.data && 
                      response.data.some(user => user.username === memberName)
    
    if (exactMatch) {
      // 用户存在，添加到成员列表
      currentMembers.value.push(memberName)
      newMember.value = ''
      searchResults.value = []
      ElMessage.success(`已添加成员: ${memberName}`)
    } else if (response.code === '200' && response.data && response.data.length > 0) {
      // 有类似的用户名，但没有精确匹配
      ElMessage.warning('请从搜索结果中选择一个用户，或输入完整的用户名')
    } else {
      ElMessage.warning('用户不存在，请输入有效的用户名')
    }
  } catch (error) {
    console.error('验证用户失败:', error)
    ElMessage.error('验证用户失败: ' + (error.message || '未知错误'))
  }
}

// 移除成员
const removeMember = (member) => {
  console.log('尝试移除成员:', member)
  console.log('当前小组信息:', currentGroup.value)
  
  // 检查是否是组长，组长不能被移除
  if (member === currentGroup.value?.leader) {
    ElMessage.warning('组长不能从小组中移除')
    return
  }
  
  const index = currentMembers.value.indexOf(member)
  if (index > -1) {
    currentMembers.value.splice(index, 1)
    console.log('成员已移除，更新后的成员列表:', currentMembers.value)
  }
}

// 保存成员变更
const saveMembers = async () => {
  if (!currentGroup.value) {
    console.error('保存失败: currentGroup为空')
    return
  }
  
  try {
    saving.value = true
    console.log('开始保存成员变更，当前小组:', currentGroup.value)
    console.log('当前用户名:', currentUsername.value)
    console.log('当前成员列表:', currentMembers.value)
    
    // 确保组长在成员列表中
    const leader = currentGroup.value.leader
    console.log('小组组长:', leader)
    if (leader && !currentMembers.value.includes(leader)) {
      currentMembers.value.push(leader)
      console.log('组长已自动添加到成员列表中，更新后的成员列表:', currentMembers.value)
      ElMessage.warning('组长已自动添加到成员列表中')
    }
    
    // 将成员数组转换为逗号分隔的字符串
    const membersStr = currentMembers.value.join(',')
    console.log('成员字符串:', membersStr)
    
    // 构建请求参数
    const params = {
      groupId: currentGroup.value.groupId,
      members: membersStr,
      currentUser: currentUsername.value
    }
    console.log('请求参数:', params)
    
    // 发送更新请求
    console.log('发送请求到:', '/api/groups/members')
    const response = await request.put('/api/groups/members', null, {
      params: params
    })
    
    console.log('服务器响应:', response)
    
    if (response.code === '200') {
      ElMessage.success('小组成员更新成功')
      memberDialogVisible.value = false
      
      // 更新本地数据
      const index = groups.value.findIndex(g => g.groupId === currentGroup.value.groupId)
      if (index > -1) {
        groups.value[index].members = membersStr
        console.log('本地数据已更新')
      }
    } else {
      console.error('服务器返回错误:', response.msg)
      ElMessage.error(response.msg || '更新小组成员失败')
    }
  } catch (error) {
    console.error('更新小组成员失败:', error)
    console.error('错误详情:', error.response ? error.response.data : '无响应数据')
    ElMessage.error('更新小组成员失败: ' + (error.message || '未知错误'))
  } finally {
    saving.value = false
  }
}

// 搜索用户
const searchUsers = () => {
  // 清除之前的定时器
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
  
  // 如果输入为空，清空搜索结果
  if (!newMember.value.trim()) {
    searchResults.value = []
    searchPerformed.value = false
    return
  }
  
  // 设置新的定时器，防抖处理
  searchTimeout.value = setTimeout(async () => {
    try {
      console.log('搜索用户:', newMember.value.trim())
      const response = await request.get('/api/users/search', {
        params: { username: newMember.value.trim() }
      })
      
      if (response.code === '200') {
        console.log('搜索结果:', response.data)
        // 过滤掉已经在成员列表中的用户和组长
        searchResults.value = (response.data || []).filter(user => {
          return !currentMembers.value.includes(user.username) && 
                 user.username !== currentGroup?.leader
        })
        console.log('过滤后结果:', searchResults.value)
      } else {
        searchResults.value = []
        ElMessage.warning(response.msg || '搜索用户失败')
      }
    } catch (error) {
      console.error('搜索用户失败:', error)
      ElMessage.error('搜索用户失败: ' + (error.message || '未知错误'))
      searchResults.value = []
    } finally {
      searchPerformed.value = true
    }
  }, 300) // 300ms的防抖延迟
}

// 选择用户
const selectUser = async (username) => {
  // 直接添加选中的用户到成员列表
  if (!currentMembers.value.includes(username)) {
    if (username === currentGroup?.leader) {
      ElMessage.warning('组长已默认在小组中')
      newMember.value = ''
      searchResults.value = []
      return
    }
    
    currentMembers.value.push(username)
    ElMessage.success(`已添加成员: ${username}`)
  } else {
    ElMessage.warning('该成员已在小组中')
  }
  
  newMember.value = ''
  searchResults.value = []
}

// 打开创建小组对话框
const openCreateGroupDialog = async () => {
  // 检查用户是否已经是组长
  try {
    checkingLeader.value = true
    const response = await request.get('/api/groups/checkLeader', {
      params: { username: currentUsername.value }
    })
    
    if (response.code === '200') {
      isLeaderAlready.value = response.data === true
      if (isLeaderAlready.value) {
        ElMessage.error('您已经是其他小组的组长，无法创建新的小组')
      }
    } else {
      ElMessage.error(response.msg || '检查组长状态失败')
      return
    }
    
    // 重置创建小组表单
    newGroupMembers.value = []
    newGroupMember.value = ''
    newGroupSearchResults.value = []
    newGroupSearchPerformed.value = false
    
    createGroupDialogVisible.value = true
  } catch (error) {
    console.error('检查组长状态失败:', error)
    ElMessage.error('检查组长状态失败: ' + (error.message || '未知错误'))
  } finally {
    checkingLeader.value = false
  }
}

// 搜索新小组用户
const searchNewGroupUsers = () => {
  // 清除之前的定时器
  if (newGroupSearchTimeout.value) {
    clearTimeout(newGroupSearchTimeout.value)
  }
  
  // 如果输入为空，清空搜索结果
  if (!newGroupMember.value.trim()) {
    newGroupSearchResults.value = []
    newGroupSearchPerformed.value = false
    return
  }
  
  // 设置新的定时器，防抖处理
  newGroupSearchTimeout.value = setTimeout(async () => {
    try {
      console.log('搜索用户:', newGroupMember.value.trim())
      const response = await request.get('/api/users/search', {
        params: { username: newGroupMember.value.trim() }
      })
      
      if (response.code === '200') {
        console.log('搜索结果:', response.data)
        // 过滤掉已经在成员列表中的用户和当前用户（组长）
        newGroupSearchResults.value = (response.data || []).filter(user => {
          return !newGroupMembers.value.includes(user.username) && 
                 user.username !== currentUsername.value
        })
        console.log('过滤后结果:', newGroupSearchResults.value)
      } else {
        newGroupSearchResults.value = []
        ElMessage.warning(response.msg || '搜索用户失败')
      }
    } catch (error) {
      console.error('搜索用户失败:', error)
      ElMessage.error('搜索用户失败: ' + (error.message || '未知错误'))
      newGroupSearchResults.value = []
    } finally {
      newGroupSearchPerformed.value = true
    }
  }, 300) // 300ms的防抖延迟
}

// 添加新小组成员
const addNewGroupMember = async () => {
  const memberName = newGroupMember.value.trim()
  if (!memberName) return
  
  console.log('尝试添加成员:', memberName)
  
  // 检查是否已存在
  if (newGroupMembers.value.includes(memberName)) {
    ElMessage.warning('该成员已在小组中')
    return
  }
  
  // 检查是否是当前用户（组长）
  if (memberName === currentUsername.value) {
    ElMessage.warning('您已默认在小组中作为组长')
    return
  }
  
  // 验证用户是否存在
  try {
    console.log('验证用户是否存在:', memberName)
    const response = await request.get('/api/users/search', {
      params: { username: memberName }
    })
    
    console.log('验证用户响应:', response)
    
    // 检查是否找到精确匹配的用户名
    const exactMatch = response.code === '200' && response.data && 
                      response.data.some(user => user.username === memberName)
    
    if (exactMatch) {
      // 用户存在，添加到成员列表
      newGroupMembers.value.push(memberName)
      newGroupMember.value = ''
      newGroupSearchResults.value = []
      ElMessage.success(`已添加成员: ${memberName}`)
    } else if (response.code === '200' && response.data && response.data.length > 0) {
      // 有类似的用户名，但没有精确匹配
      ElMessage.warning('请从搜索结果中选择一个用户，或输入完整的用户名')
    } else {
      ElMessage.warning('用户不存在，请输入有效的用户名')
    }
  } catch (error) {
    console.error('验证用户失败:', error)
    ElMessage.error('验证用户失败: ' + (error.message || '未知错误'))
  }
}

// 选择新小组用户
const selectNewGroupUser = (username) => {
  // 直接添加选中的用户到成员列表
  if (!newGroupMembers.value.includes(username)) {
    if (username === currentUsername.value) {
      ElMessage.warning('您已默认在小组中作为组长')
      newGroupMember.value = ''
      newGroupSearchResults.value = []
      return
    }
    
    newGroupMembers.value.push(username)
    ElMessage.success(`已添加成员: ${username}`)
  } else {
    ElMessage.warning('该成员已在小组中')
  }
  
  newGroupMember.value = ''
  newGroupSearchResults.value = []
}

// 移除新小组成员
const removeNewGroupMember = (member) => {
  const index = newGroupMembers.value.indexOf(member)
  if (index > -1) {
    newGroupMembers.value.splice(index, 1)
    console.log('成员已移除，更新后的成员列表:', newGroupMembers.value)
  }
}

// 创建小组
const createGroup = async () => {
  // 如果用户已经是组长，则不允许创建新小组
  if (isLeaderAlready.value) {
    ElMessage.error('您已经是其他小组的组长，无法创建新的小组')
    return
  }
  
  try {
    creatingGroup.value = true
    console.log('开始创建小组')
    
    // 构建小组成员字符串，确保包含组长
    let membersStr = currentUsername.value
    if (newGroupMembers.value.length > 0) {
      membersStr += ',' + newGroupMembers.value.join(',')
    }
    console.log('成员字符串:', membersStr)
    
    // 构建请求参数
    const group = {
      leader: currentUsername.value,
      members: membersStr
    }
    console.log('创建小组参数:', group)
    
    // 发送创建请求
    const response = await request.post('/api/groups', group)
    
    console.log('服务器响应:', response)
    
    if (response.code === '200') {
      ElMessage.success('小组创建成功')
      createGroupDialogVisible.value = false
      
      // 刷新小组列表
      await fetchGroups()
    } else {
      console.error('服务器返回错误:', response.msg)
      ElMessage.error(response.msg || '创建小组失败')
    }
  } catch (error) {
    console.error('创建小组失败:', error)
    console.error('错误详情:', error.response ? error.response.data : '无响应数据')
    ElMessage.error('创建小组失败: ' + (error.message || '未知错误'))
  } finally {
    creatingGroup.value = false
  }
}

// 页面加载时执行
onMounted(async () => {
  currentUsername.value = getCurrentUser()
  console.log('当前用户:', currentUsername.value)
  await fetchGroups()
})
</script>

<style scoped>
.group-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 16px;
}

.page-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.header-description {
  font-size: 14px;
  color: #909399;
}

.loading-container {
  padding: 20px 0;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.group-card {
  margin-bottom: 0;
  transition: transform 0.3s;
}

.group-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-title {
  font-weight: bold;
  font-size: 16px;
}

.group-info {
  margin-top: 10px;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: 500;
  color: #606266;
  margin-right: 5px;
}

.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.member-tag {
  margin-right: 5px;
}

.leader-badge {
  font-size: 12px;
  margin-left: 4px;
  font-weight: bold;
}

.member-note {
  margin-bottom: 12px;
}

.edit-button {
  margin-left: 10px;
}

.delete-button {
  margin-left: 5px;
}

.dialog-section {
  margin-bottom: 20px;
}

.dialog-section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.current-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  min-height: 32px;
}

.add-member-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-input {
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.search-results {
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.search-result-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: #f5f7fa;
}

.search-result-item:not(:last-child) {
  border-bottom: 1px solid #ebeef5;
}

.user-phone {
  color: #909399;
  font-size: 12px;
}

.no-results {
  margin-top: 10px;
  padding: 8px 12px;
  color: #909399;
  text-align: center;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>